<template>
  <div>
    <!-- <h1>当前求和为:{{$store.state.sum}}</h1> 
    1.我们希望更加简单的写法，不希望写那么长，所以我们可以写到计算属性中这样
    简写起来也方便
    -->
     <h1>当前求和为:{{sum}}</h1>
    <!-- <h1>当前求和*10为:{{$store.getters.bigSum}}</h1> -->
    <h1>当前求和*10为:{{bigSum}}</h1>
    <!-- 当然你可以在手机的时候，强制转换为number-->
    <select v-model.number="n">
        <!-- 如果不加：会导致这里返回去的值都是字符串
        加上后会被理解成表达式，所以会变成
        数字，不会影响运算
        -->
        <option :value="1">1</option>
        <option :value="2">2</option>
        <option :value="3">3</option>
    </select>
    <button @click="increment(n)">+</button>
    <button @click="decrement(n)">-</button>
    <button @click="incrementOdd">当前求和为奇数再加</button>
    <button @click="incrementWait(n)">等一等再加</button>
  </div>
</template>

<script>
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
export default {
    name:"CountComponent",
    data(){
        return {
            n:1,//用户选择的数据
            // sum:0// 总和
        }
    },
    methods:{
        // decrement(){
        //     // 当你不需要什么业务逻辑的时候，可以直接和mutations对话
        //     this.$store.commit('JIA',this.n)
        // },
        // 需要注意的是，我们原先的写法是传递了参数的，就是this.n，但是在对应的
        // 方法中，是无法传递参数的，对于mapMutations中映射的方法，会变成这样
        // decrement(value){
        //     this.$store.commit('JIA',value)
        // }
        /**
         * 意味着，他将参数传入给了你定义的方法中，如果你不写
         * 默认是event对象，所以你可以在方法调用的时候，传递参数
         */
        ...mapMutations({decrement:'JIA'}),
        incrementOdd(){
            
        },
        ...mapActions({increment:'jia',incrementWait:'jiaWait'})
        // increment(){
        //     this.$store.dispatch('jia',this.n)
        // },
        
        // incrementWait(){
        //    this.$store.dispatch('jiaWait',this.n)
        // }
    },
    computed:{
        /**
         * 2.问题在于如果每次都需要这样写，会很麻烦,
         * 所以我们可以引入vuex里面的mapState来为我们自动生成这段代码
         */
        // sum(){
        //     return $store.state.sum
        // },
        // 借助mapState生成计算属性，从state中读取数据
        // ...mapState({jia:'sum'}),
        // 第二种，数组形式，只有当你的计算属性和state属性完全相同的时候，才可以这样写
        ...mapState(['sum']),
        // bigSum(){
        //     return this.$store.getters.bigSum
        // }
        // ...mapGetters({bigSum:'bigSum'}),
        ...mapGetters(['bigSum'])
    },
    mounted() {
        // 3.需要注意的是，key是你的在computed定义的值，而value是字符串，表示的是
        // state中的变量名，请注意！！！！这里只能对state里的变量进行操作
        // 像是bigSum就无法这样做，因为他操作的是getters对象
        const x = mapState({sum:'sum'})
    },
}
</script>

<style>

</style>